<script setup lang="ts">
import moment from "moment";
import Trans from "~/utils/sycm/trans";

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  showZs: {
    type: Boolean,
    default: false
  },
});
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const loading = ref<boolean>(false);
const getData = (indexItem: any, index: number) => {
  let _data: any = {};
  props.data.map((e: any) => {
    if (!e.treedData) {
      _data[e.key] = null;
    } else {
      if (props.showZs) {
        _data[e.key] = e.treedData.data[indexItem.value][index];
      } else {
        _data[e.key] = e.treedData.tranData[indexItem.value][index];
      }
    }
  });
  return _data;
}
const calcDataSource = () => {
  loading.value = true;
  if (props.data.length > 0) {
    let currData: any = props.data.find((e: any) => {
      return e.active
    });
    if (currData) {
      let dates: string[] = [];
      if (currData.treedData) {
        let dateRange = currData.treedData.dateRange.split('|');
        let startDate = dateRange[0];
        let endDate = dateRange[1];
        let start = moment(startDate);
        let end = moment(endDate);
        if (startDate == endDate) {
          // 如果是同一天开始日期是30天前 需要算是当天所以是-29天
          start = start.subtract(29, 'days');
        }
        while (start <= end) {
          dates.push(start.format('YYYY-MM-DD'));
          start = start.add(1, 'days');
        }
      }
      if (props.showZs) {
        columns.value = [
          {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
            width: 100,
            sorter: (a: any, b: any) => {
              return moment(a.date).valueOf() - moment(b.date).valueOf();
            },
            fixed: 'left',
          },
          {
            title: '类型',
            dataIndex: 'type.text',
            key: 'type',
            align: 'center',
            dataType: 'custom',
            slot: 'type',
            width: 80,
            sorter: (a: any, b: any) => {
              return a.type.text.localeCompare(b.type.text);
            },
            fixed: 'left',
          },
          ...props.data.map((item: any) => {
            return {
              title: item.name,
              dataIndex: item.key,
              key: item.key,
              align: 'center',
              sorter: (a: any, b: any) => {
                return a[item.key] - b[item.key];
              },
              width: item.name.length * 14 + 20,
            }
          })];
        dataSource.value = [];
        dates.map((date: any, index: number) => {
          currData.treedData.indexList.map((item: any, key: number) => {
            dataSource.value.push({
              date: date,
              type: {
                text: item.text,
                color: ["#2062E6", "#F3D024", "#FF8533", "#4CB5FF", "#BC64E5", "#04C9A8", "#F75CA9", "#00CFCF", "#F85948"][key],
              },
              // 注入数据
              ...getData(item, index),
            })
          });
        })
      } else {
        columns.value = [
          {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
            width: 100,
            sorter: (a: any, b: any) => {
              return moment(a.date).valueOf() - moment(b.date).valueOf();
            },
            fixed: 'left',
          },
          {
            title: '类型',
            dataIndex: 'type.text',
            key: 'type',
            align: 'center',
            dataType: 'custom',
            slot: 'type',
            width: 80,
            sorter: (a: any, b: any) => {
              return a.type.text.localeCompare(b.type.text);
            },
            fixed: 'left',
          },
          ...props.data.map((item: any) => {
            return {
              title: item.tranName,
              dataIndex: item.key,
              align: 'center',
              // dataType: 'customRender',
              // render: (text: any, record: any, index: any) => {
              //   console.log(text,record,index);
              //   if (text === null) {
              //     return '-';
              //   }
              //   let d = item.tranFunc(text);
              //   if (d == 'NaN') {
              //     return '-';
              //   }
              // },
              sorter: (a: any, b: any) => {
                return a[item.key] - b[item.key];
              },
              key: item.key,
              width: item.tranName.length * 14 + 20,
            }
          })];
        dataSource.value = [];
        dates.map((date: any, index: number) => {
          currData.treedData.indexList.map((item: any, key: number) => {
            dataSource.value.push({
              date: date,
              type: {
                text: item.text,
                color: ["#2062E6", "#F3D024", "#FF8533", "#4CB5FF", "#BC64E5", "#04C9A8", "#F75CA9", "#00CFCF", "#F85948"][key],
              },
              // 注入数据
              ...getData(item, index),
            })
          });
        })
      }
    }
  }
  loading.value = false;
}
calcDataSource();
watch(() => props.data, (val) => {
  calcDataSource();
}, {deep: true})
watch(() => props.showZs, (val) => {
  calcDataSource();
})
</script>

<template>
  <a-spin :spinning="loading">
    <div style="min-height: 500px">
      <base-table :columns="columns" :scroll="{
        y:550
      }" :data-source="dataSource" table-name="市场-市场大盘-行业趋势"
      >
        <template #type="row">
          <a-tag :color="row.type.color">{{ row.type.text }}</a-tag>
        </template>
      </base-table>
    </div>
  </a-spin>
</template>

<style scoped>

</style>
